<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Echart 图标样例 </title>
    #@header()
    <script src="#(path)/static/libs/echarts/echarts.min.js"></script>
    <script src="#(path)/static/libs/echarts/ecstat/ecStat.min.js"></script><!-- 工具条js -->
    <script src="#(path)/static/libs/echarts/echarts.tool.js"></script>
    <style type="text/css">
        #chart{
            width:100%;height:550px;margin-top:30px;
        }
        .chart{
            width:50%;height:250px;margin-top:30px;float: left;display: none;
        }
    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="bar" style="width: 50%;height:400px;float: left"></div>
<div id="line" style="width: 50%;height:400px;float: left"></div>
<div id="pie" style="width: 50%;height:400px;float: left"></div>
<div id="chart" style="width: 50%;height:400px;float: left"></div>
<div id="chart0" class="chart"></div>
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
<script type="text/javascript">
    var _path="#(path)";
    //柱状图
    //变量配置
    var config=echart.config;
    console.log(config)
    config.title="本月销售金额统计";
    config.title_x="center";
    config.subtitle="测试";
    config.legend=['金额'];
    config.legend_x="left";
    //config.xName="类型";
    config.xAxis=["采购商品1","采购商品2","采购商品3","采购商品4","采购商品5","采购商品6"];
    //config.yName="数量";
    config.seriesName="金额";
    config.seriesData=[5, 20, 36, 10, 10, 20];
    config.divId="bar";
    echart.bar(config);

    //折线图
    config.title="本月销售数量统计";
    config.legend=['数量'];
    config.seriesName="数量";
    config.seriesData=[10,30,50,60,70,100];
    config.divId="line";
    echart.line(config);

    //饼图
    config.title="本月收入情况统计";
    config.legend=["已收款","未收款"];
    config.Name='支出情况';
    config.seriesPieData=[{value:80,name:'未支付'},{value:90,name:'已支付'}];
    config.divId="pie";
    config.tooltipText="元";
    echart.pie(config);


    //部门人数 统计
    // echart.getData("#(path)/portal/echart/queryData",null);
</script>
</body>
</html>